<template>
	<view>
		<view class="" v-if="shenfen==3">
			<mytabs :listF='list1' :listS='list2' @bigtabchange='bigtabchange' @changcurrent='changcurrent'
				:current='current'></mytabs>
			<view class="search">
				<view class="search_left u-font-26" @click="chosseaddress">
					<text>{{searchtext}}</text>
					<u-icon name='arrow-down' color='#fff'></u-icon>
				</view>
				<view class="search_right">
					<u-icon name='search'></u-icon>
					<input v-model="searphone" type="text" placeholder="请搜索手机号/取件码" />
					<view class="shu"></view>
					<text class="blue u-font-26" @click="tosearch">搜索</text>
				</view>
			</view>
			<swiperitem @changeswiper='changeswiper' :marks='marks' :bigcurrent='bigcurrent' :searchtext='searchtext'
				:current='current' :swiperlist='list2'></swiperitem>
			<view class="oneclick u-radius-40" @click="popclick" v-if="current==2&& bigcurrent==0">
				一键送达
			</view>
			<u-popup :show="popshow" round=20 :closeable='true' @close="popclose" @open="open">
				<view class="popbox">
					<uni-section title="选择地址" type="line">
						<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
					</uni-section>
					<uni-section title="快递图片" type="line"></uni-section>
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="3">

					</u-upload>
					<view class="poponeclick" @click="modalclick">
						<text class="main-text poponeclickitem">一键送达</text>
					</view>
				</view>
			</u-popup>
			<u-picker :show="show" :closeOnClickOverlay='true' @confirm='confirm' @close='close' @cancel='cancel'
				:columns="columns"></u-picker>
			<u-modal :show="modalshow" :showCancelButton='true' @cancel='modalcancel' @confirm='modalconfirm'
				:title="title" :content='content'></u-modal>
		</view>
		<u-empty text='暂未开放~' v-else></u-empty>
	</view>
</template>

<script>
	import mytabs from '../../components/mytabs.vue';
	import swiperitem from '../../components/swiperitem.vue';
	import school from '../../utils/schoole';
	export default {
		components: {
			mytabs,
			swiperitem
		},
		data() {
			return {
				fileList1: [],
				value: 0,
				title: '提示',
				content: '',
				modalshow: false,
				show: false,
				popshow: false,
				myimg: [],
				range: [],
				columns: [],
				liulist: [],
				searphone: '',
				helist: [],
				sonlist: [],
				julist: [],
				shenfen: '',
				searchtext: '全部',
				current: 0,
				bigcurrent: 0,
				ordernum: 0,
				address: '',
				list1: [{
					name: '代取件',
				}, {
					name: '代寄件',
				}, ],
				list2: [{
					name: '待接订单',
				}, {
					name: '已接订单',
				}, {
					name: '正在配送',
				}, {
					name: '历史订单',
				}, ],
				marks: ''
			};
		},
		onLoad() {
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route // 获取当前页面路由，也就是最后一个打开的页面路由
			console.log(routes[0].route, 'zxc');
			if (routes[0].route) {
				this.marks = 1
			}
			this.range = school
			this.sonlist = this.getson()
			this.liulist = this.getliu()
			this.helist = this.gethe()
			this.julist = this.getju()
			let arr = ['全部','郑大松园餐厅西侧菜鸟驿站','郑州大学柳园菜鸟驿站','郑大本源体育场北侧']
			this.columns.push([...arr,...this.julist, ...this.sonlist, ...this.liulist, ...this.helist])
			
		},
		onShow() {
			this.init()
		},
		beforeDestroy() {
			uni.$off('changelou')
		},
		methods: {
			tosearch() {
				uni.$emit('seachphone', this.searphone)
				// this.searphone = ''
			},
			init() {
				this.$userinfo().then(res => {
					this.shenfen = res.data.data.group_id
				})
			},
			getson() {
				let arr = []
				for (var i = 1; i < 22; i++) {
					arr.push(`松园${i}号楼`)
				}
				return arr
			},
			getliu() {
				let arr = []
				for (var i = 1; i < 25; i++) {
					arr.push(`柳园${i}号楼`)
				}
				return arr
			},
			gethe() {
				let arr = []
				for (var i = 1; i < 24; i++) {
					arr.push(`荷园${i}号楼`)
				}
				return arr
			},
			getju() {
				let arr = []
				for (var i = 1; i < 7; i++) {
					
					if (i == 2 || i == 5) {
						arr.push(`菊园${i}号楼`)
					} else {
						arr.push(`菊园${i}号楼西`)
						arr.push(`菊园${i}号楼东`)
					}
				}
				return arr
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.myimg.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.$uploadUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test',
							token: uni.getStorageSync('token')
						},
						success: (res) => {
							let newres = JSON.parse(res.data)

							this.myimg.push(newres.data.url)
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			changcurrent(e) {
				this.current = e

			},
			modalclick() {
				if (!this.address) {
					this.$toast('请选择一键送达的宿舍楼~')
				} else if (this.myimg == '') {
					this.$toast('请上传包裹图片~')
				} else {
					this.modalshow = true
				}


			},
			changeswiper(e) {
				this.current = e
				uni.$emit('fathersmalltabchange', e)
			},
			bigtabchange(e) {
				this.bigcurrent = e
				uni.$emit('fatherbigtabchange', e)
				// console.log('我是bigtabs的值',e);
			},
			//下拉选择框
			change(e) {
				this.address = e
				this.$api.post('/Delivery/Getsingular', {
					op: this.bigcurrent + 1,
					address: e
				}).then(res => {
					this.ordernum = res.data
					this.content = `${e}共${res.data}单，确认一键送达吗？`
				})

			},
			//选择地点
			chosseaddress() {
				this.show = true
			},
			cancel() {
				this.show = false
			},
			confirm(e) {
				this.searchtext = e.value[0]
				console.log(this.searchtext);
				uni.$emit('changelou', this.searchtext)
				this.show = false
			},
			popclose() {
				this.myimg = []
				this.fileList1 = []
				this.address = ''
				this.value = ''
				this.popshow = false
			},
			close() {
				this.show = false

			},
			open() {

			},
			popclick() {
				this.popshow = true
			},

			modalcancel() {
				this.modalshow = false
			},
			modalconfirm() {
				this.$api.post('/Delivery/Oneclickdelivery', {
					op: this.bigcurrent + 1,
					sd_imgs: this.myimg.join(','),
					address: this.address
				}).then(res => {
					this.$toast(res.msg)
					uni.$emit('arrived', 1)

					this.modalshow = false
					this.popshow = false
				})


			},
		}
	}
</script>

<style lang="scss">
	@mixin flex {
		display: flex;
		align-items: center;
	}

	.search {
		@include flex width: 686rpx;
		justify-content: space-between;
		box-sizing: border-box;
		margin: 10rpx auto;

		.search_left {
			flex-shrink: 0;
			width: 40%;
			@include flex justify-content: space-between;
			background-color: rgb(41, 75, 183);
			border-radius: 16rpx;
			padding: 16rpx 32rpx;
			box-sizing: border-box;
			color: #fff;
		}

		.search_right {
			@include flex width: 57%;
			box-sizing: border-box;
			background-color: rgb(41, 75, 183);
			border-radius: 16rpx;
			padding: 16rpx 32rpx;
			background-color: rgb(244, 247, 254);
			.input-placeholder {
				font-size: 24rpx !important;
			}
			.shu {
				width: 2rpx;
				margin: 0 10rpx;
				height: 30rpx;
				background-color: #707fb6;
			}

			input {
				flex: 1;
			}

			.blue {
				color: #707fb6;
			}
		}
	}

	.oneclick {
		position: fixed;
		top: 40%;
		font-weight: bold;
		right: 30rpx;
		background-image: linear-gradient(to right, #00befc, #007dfb);
		padding: 16rpx 30rpx;
		z-index: 999;
		box-sizing: border-box;
		color: #fff;
	}

	.popbox {
		padding: 32rpx 32rpx 400rpx;
		box-sizing: border-box;

		.poponeclick {
			display: flex;
			justify-content: flex-end;

			.poponeclickitem {
				background-color: rgb(50, 94, 229);
				padding: 10rpx 20rpx;
				color: #fff;
			}
		}
	}
</style>